<template>
  <div class="user">
    <div class="search">
      <page-search
        :searchFormConfig="formConfig"
        @resetBtnClick="handleResetClick"
        @queryBtnClick="handleQueryClick"
      ></page-search>
    </div>
    <div class="tontent">
      <page-content
        ref="pageContentRef"
        :contentTableConfig="contentTableConfig"
        :pageName="pageName"
      ></page-content>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { formConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'

import { usePageSearch } from '@/hooks/usePageSearch'

import PageSearch from '@/components/page-search/index'
import PageContent from '@/components/page-content'

export default defineComponent({
  name: 'user',
  components: { PageSearch, PageContent },
  setup() {
    const pageName = 'users'
    const [pageContentRef, handleQueryClick, handleResetClick] = usePageSearch()

    return {
      pageContentRef,
      formConfig,
      contentTableConfig,
      pageName,
      handleResetClick,
      handleQueryClick
    }
  }
})
</script>

<style scoped lang="less">
.user {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .search {
    background: #fff;
    padding: 10px 10px 0 0;
  }
  .tontent {
    margin-top: 10px;
    height: 0;
    overflow: auto;
    flex: 1;
  }
}
</style>
